<template>
	<ReturnPage title="返回" :on-back="onBack"></ReturnPage>
	<view class="content">
		<view class="schedule-info">
			<view class="schedule-info-body">
				<view class="chedule-info-title">赛程信息</view>
				<view class="chedule-info-item" v-for="item in infoFormItems" :key="item.key">
					<view class="chedule-info-item-label">{{item.label}}：</view>
					<view class="chedule-info-item-text" :class="[item.className]">{{scheduleInfo[item.key]}}</view>
				</view>
			</view>
			<view class="schedule-info-clip"></view>
		</view>
		<FormPanel title="报名情况" :btns="props.data.length === 0 ? [] : props.formBtns">
			<view class="modol-box">
				<view v-if="props.loading" class="loading-container">
				  <view class="loading-spinner"></view>
				  <text>加载中...</text>
				</view>
				<view v-if="props.data.length === 0" class="empty-state">
				  <text>暂无报名情况</text>
				</view>
				<swiper v-else class="swiper" :class="{'scroll-swiper': hasScroll}" :autoplay="false" :vertical="true" style="height: 100%;" :current="props.currentIndex" @change="onSwiperChange">
					<swiper-item v-for="model in props.data" :key="model.id" class="model">
						<view class="model-title">报名记录</view>
						<view class="model-form">
							<view v-for="formItem in props.formItems" class="form-item">
								<view class="form-item-label">{{formItem.label}}：</view>
								<view class="form-item-text">
									<text>{{ typeof formItem.format === 'function' ? formItem.format(model[formItem.key]) : model[formItem.key] }}</text>
									<view v-if="formItem.status" :class="formItem.status.className(model[formItem.status.key])">{{formItem.status.format(model[formItem.status.key])}}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<SwiperScrollbar v-if="hasScroll" :index="props.currentIndex" :length="props.data.length" ></SwiperScrollbar>
			</view>
		</FormPanel>
	</view>
</template>

<script setup>
import ReturnPage from '@/components/ReturnPage.vue'
import FormPanel from '@/components/FormPanel.vue'
import { computed } from 'vue'
import SwiperScrollbar from '@/components/SwiperScrollbar.vue'

const props = defineProps(['formBtns', 'currentIndex', 'setCurrentIndex', 'loading', 'data', 'scheduleName', 'scheduleId', 'formItems'])

const hasScroll = computed(() => {
	return props.data.length > 1
})

const scheduleInfo = computed(() => {
	return {
		scheduleName: props.scheduleName,
		scheduleId: props.scheduleId,
		count: props.data.length + '人'
	}
})


const onBack = () => {
	uni.navigateBack()
}

const onSwiperChange = ({ detail }) => {
	props.setCurrentIndex(detail.current)
}

const infoFormItems = [
	{
		label: '赛程名称',
		key: 'scheduleId'
	},
	{
		label: '赛程ID',
		key: 'scheduleId'
	},
	{
		label: '报名人数',
		key: 'count',
		className: 'red'
	}
]

</script>

<style scoped lang="scss">
.content {
	width: 100vw;
	height: calc(100vh - 38rpx);
	padding: 18rpx 58rpx 48rpx 48rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	font-family: Source Han Sans CN, Source Han Sans CN;
	.schedule-info {
		height: 100%;
		aspect-ratio: 11 / 13;
		margin-right: 20rpx;
		background-image: url("/src/static/box_bg1.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 9rpx 7rpx 15rpx 14rpx;
		box-sizing: border-box;
		position: relative;
		.schedule-info-body {
			width: 100%;
			height: 100%;
			background-image: url("/src/static/box_bg2.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.chedule-info-title {
				padding-top: 20rpx;
				text-align: center;
				font-weight: bold;
				font-size: 15rpx;
				color: #761800;
				line-height: 18rpx;
				margin-bottom: 4rpx;
			}
			.chedule-info-item {
				text-indent: 31rpx;
				margin-bottom: 16rpx;
				.chedule-info-item-label {
					font-weight: 400;
					font-size: 13rpx;
					color: #654E49;
					line-height: 18rpx;
				}
				.chedule-info-item-text {
					font-weight: 400;
					font-size: 13rpx;
					color: #4A5971;
					line-height: 18rpx;
					height: 24rpx;
				}
				.red {
					font-weight: bold;
					font-size: 13rpx;
					color: #FF4911;
				}
			}
		}
		.schedule-info-clip {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, calc(-50% + 6rpx));
			width: 54rpx;
			height: 34rpx;
			background-image: url("/src/static/back_icon2.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
}
.swiper {
	background-color: #F0F0E4;
	border-radius: 6rpx;
}
.scroll-swiper {
	width: calc(100% - 16rpx);
}
.modol-box {
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
	.model {
		padding: 8rpx;
		line-height: 24rpx;
		height: 100%;
		box-sizing: border-box;
		.model-title {
			width: 100%;
			font-weight: bold;
			font-size: 13rpx;
			color: #384A58;
			text-indent: 14rpx;
		}
		.model-form {
			font-weight: 400;
			font-size: 13rpx;
			justify-content: center;
			.form-item {
				width: 100%;
				display: flex;
			}
			.form-item-label {
				color: #99A1A4;
				width: 140rpx;
				text-align: right;
			}
			.form-item-text {
				color: #4A5971;
				display: flex;
				flex-grow: 1;
				justify-content: space-between;
			}
		}
		
	}
}

.registration-status {
	padding: 0 10rpx;
	border-radius: 6rpx;
	font-size: 13rpx;
	font-weight: bold;
	line-height: 24rpx;

	&.status-valid {
	  background: #d4edda;
	  color: #155724;
	}

	&.status-deleted {
	  background: #f8d7da;
	  color: #721c24;
	}
}

.loading-container, .empty-state {
	text-align: center;
	color: #999;
	padding: 50rpx;
}
.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20rpx;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>